import React, { useEffect, useRef, useState, useCallback } from "react";
import { Box, Paper, Typography, Tabs, Tab, IconButton } from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import CloseIcon from "@mui/icons-material/Close";
import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";
import { WebLinksAddon } from "xterm-addon-web-links";
import "xterm/css/xterm.css";

function TerminalPanel({
  activeConnection,
  activeConnections = [],
  connections = [],
  sendCommand,
}) {
  // ... 在组件顶部添加数据队列
  const [dataQueue, setDataQueue] = useState({});
  // 标签页状态管理
  const [tabs, setTabs] = useState([]);
  const [activeTab, setActiveTab] = useState(0);

  // 终端实例管理 - 使用数组存储终端实例
  const [terminals, setTerminals] = useState([]);

  // 创建新终端实例的函数
  const createTerminal = useCallback((tabId, element) => {
    if (!element) {
      console.warn("创建终端失败: DOM元素不存在", tabId);
      return null;
    }

    console.log("开始创建终端实例=====:", tabId);
    console.log("开始创建终端实例:", element);

    // 创建终端实例
    const term = new Terminal({
      cursorBlink: true,
      theme: {
        background: "#1e1e1e",
        foreground: "#f0f0f0",
      },
      fontSize: 14,
      fontFamily: 'Consolas, "Courier New", monospace',
      scrollback: 1000,
      convertEol: true, // 确保换行符正确转换
    });

    // 创建并注册插件
    const fitAddon = new FitAddon(); // 确保正确初始化 FitAddon
    term.loadAddon(fitAddon); // 加载插件到终端
    term.loadAddon(new WebLinksAddon());

    // 打开终端
    try {
      term.open(element);
      fitAddon.fit();
      console.log("终端实例创建成功，DOM元素:", element, "终端实例:", term);
      
      // 测试终端是否可写
      term.write('测试终端输出\r\n');
    } catch (error) {
      console.error("终端打开错误:", error);
      return null;
    }

    // 显示欢迎信息
    term.writeln("欢迎使用OULEI-SSH终端客户端");
    term.writeln("请在左侧选择或创建一个连接");
    term.writeln("");

    setTerminals(prev => [...prev, { id: tabId, term, fitAddon }]); // 保存 fitAddon

    return { terminal: term, fitAddon }; // 返回终端和 fitAddon
  }, []);

  // 初始化默认标签页
  useEffect(() => {
    // 如果没有标签页，创建一个默认标签页
    if (tabs.length === 0) {
      addNewTab();
    } else {
      // 当DOM元素准备好后，初始化终端
      // 检查每个标签页是否已有对应的终端实例
      tabs.forEach(tab => {
        const tabId = tab.id;

        // 如果DOM元素存在但终端实例不存在，创建新的终端实例
        const element = document.querySelector(`[data-tab-id="${tabId}"]`);
        console.log("检查每个标签页是否已有对应的终端实例:", tabId, element);
        if (element && !terminals.find(t => t.id === tabId)) {
          console.log("如果DOM元素存在但终端实例不存在，创建新的终端实例:", tabId);
          const { terminal, fitAddon } = createTerminal(tabId, element); // 解构返回的对象
        }
      });
    }
  }, [tabs]);

  // 为特定标签页设置输入事件处理
  useEffect(() => {
    // 为每个标签页设置数据处理器
    tabs.forEach((tab) => {
      if (!tab.connectionId) return; // 跳过没有连接的标签页

      const terminalObj = terminals.find(t => t.id === tab.id);
      if (!terminalObj) return;

      const term = terminalObj.term;

      // 创建数据处理器
      const dataHandler = (data) => {
        console.log("终端输入:", data, "标签页连接:", tab.connectionId);

        // 特殊按键处理
        const charCode = data.charCodeAt(0);
        if (charCode === 13) {
          // 回车键
          sendCommand("\r", tab.connectionId);
        } else if (charCode === 127) {
          // 退格键
          sendCommand("\b", tab.connectionId);
        } else if (charCode < 32 && charCode !== 13 && charCode !== 10) {
          // 其他控制字符
          sendCommand(data, tab.connectionId);
        } else {
          // 普通字符
          sendCommand(data, tab.connectionId);
        }
      };

      // 保存处理器引用以便后续清理
      term._dataHandler = dataHandler;

      // 添加新的数据处理器
      term.onData(dataHandler);
      term._dataHandlerSet = true; // 标记已设置处理器
    });
  }, [sendCommand]);

  // 处理窗口大小变化
  useEffect(() => {
    const handleResize = () => {
      // 调整所有终端大小
      console.log("调整所有终端大小");
      terminals.forEach(({ term, fitAddon }) => {
        if (fitAddon && term) {
          // 确保容器尺寸正确
          const element = term.element.parentElement;
          if (element) {
            element.style.width = '100%';
            element.style.height = '100%';
          }
          
          // 使用 requestAnimationFrame 确保在下一帧渲染时调整大小
          requestAnimationFrame(() => {
            try {
              fitAddon.fit();
              // 触发终端重新计算尺寸
              term.refresh(0, term.rows - 1);
            } catch (error) {
              console.error('终端大小调整错误:', error);
            }
          });
        }
      });
    };

    // 初始调整
    handleResize();

    // 添加防抖，避免频繁触发
    let resizeTimeout;
    const debouncedResize = () => {
      clearTimeout(resizeTimeout);
      resizeTimeout = setTimeout(handleResize, 100);
    };

    window.addEventListener("resize", debouncedResize);
    return () => {
      window.removeEventListener("resize", debouncedResize);
      clearTimeout(resizeTimeout);
    };
  }, [terminals]);

  // 处理标签页切换
  const handleTabChange = (event, newValue) => {
    setActiveTab(newValue);
  };

  // 添加新标签页
  const addNewTab = useCallback((title, connId) => {
    // 检查是否已存在相同连接ID的标签页
    if (connId) {
      const existingTabIndex = tabs.findIndex(
        (tab) => String(tab.connectionId) === String(connId)
      );

      if (existingTabIndex !== -1) {
        console.log("已存在相同连接ID的标签页，切换到该标签页:", existingTabIndex);
        setActiveTab(existingTabIndex);
        return; // 已存在则不创建新标签页
      }
    }

    console.log("创建新标签页 -----connId:", connId, "title:", title);
    const newTabId = `tab-${Date.now()}`;
    const newTab = {
      id: newTabId,
      title: title || "新终端",
      connectionId: connId || null,
    };

    setTabs((prevTabs) => {
      const newTabs = [...prevTabs, newTab];
      console.log("创建新标签页 - 更新前标签页:", prevTabs.length, "更新后:", newTabs.length);
      // 设置活动标签
      setActiveTab(newTabs.length - 1);
      return newTabs;
    });

    console.log("创建新标签页 =====:", newTabId, "标题:", title, "连接ID:", connId);
  }, []);

  // 处理活动连接变化 - 创建新标签页或更新现有标签页
  useEffect(() => {
    console.log("活动连接变化:", activeConnections);

    // 处理多个活动连接
    activeConnections.forEach((connection) => {
      if (!connection) return;

      // 检查是否已经有该连接的标签页
      const existingTabIndex = tabs.findIndex(
        (tab) => String(tab.connectionId) === String(connection.id)
      );

      if (existingTabIndex === -1) {
        console.log("活动连接变化 ===== 创建新标签页:", connection.host, connection.id);
        addNewTab(connection.host, connection.id);
      } else {
        console.log("活动连接变化 - 已存在标签页:", existingTabIndex);
      }
    });
  }, [activeConnections]);

  const handleSshData = (event, data) => {
    console.log("监听到SSH数据-----", data);
    if (!data || !data.connectionId) return;

    const { connectionId, output } = data;
    const tabIndex = tabs.findIndex(
      (tab) => String(tab.connectionId) === String(connectionId)
    );

    if (tabIndex === -1) {
      // ... 创建新标签页的代码保持不变 ...
      return;
    }

    const tabId = tabs[tabIndex].id;
    const terminalObj = terminals.find(t => t.id === tabId);

    if (terminalObj && output) {
      // 终端实例存在，直接写入数据
      console.log("准备写入数据到终端:", {
        terminalObj,
        output,
        isTerminalReady: terminalObj.term._core && terminalObj.term._core._initialized
      });
      try {
        terminalObj.term.write(output);
        // 写入后调整终端大小
        terminalObj.fitAddon.fit();
      } catch (error) {
        console.error("终端写入错误:", error);
      }
    } else {
      // 终端实例不存在，将数据加入队列
      console.log("终端实例不存在，将数据加入队列-----");
      setDataQueue(prev => ({
        ...prev,
        [tabId]: [...(prev[tabId] || []), output]
      }));
    }
  };

  // ... 在终端创建完成后处理队列中的数据
  useEffect(() => {
    // 检查是否有需要处理的数据队列
    Object.entries(dataQueue).forEach(([tabId, outputs]) => {
      console.log("处理队列数据-----", tabId, outputs);
      const terminalObj = terminals.find(t => t.id === tabId);
      if (terminalObj && outputs.length > 0) {
        // 找到终端实例，处理队列中的数据
        outputs.forEach(output => {
          try {
            terminalObj.term.write(output);
          } catch (error) {
            console.error("处理队列数据错误:", error);
          }
        });
        // 清空已处理的数据
        setDataQueue(prev => {
          const newQueue = { ...prev };
          delete newQueue[tabId];
          return newQueue;
        });
      }
    });
  }, [terminals, dataQueue]);

  // 监听SSH数据
  useEffect(() => {
    if (!window.electron) {
      console.warn("Electron对象不存在，无法监听SSH数据");
      return;
    }

    // 添加监听器
    window.electron.ipcRenderer.on("ssh-data", handleSshData);
    console.log("已添加SSH数据监听器");

    // 清理函数
    return () => {
      window.electron.ipcRenderer.removeListener("ssh-data", handleSshData);
      console.log("已移除SSH数据监听器");
    };
  }, [terminals]);

  // 关闭标签页
  const closeTab = (event, tabIndex) => {
    event.stopPropagation(); // 阻止事件冒泡触发标签切换

    if (tabs.length <= 1) {
      // 不允许关闭最后一个标签页
      return;
    }

    const tabToClose = tabs[tabIndex];

    // 如果标签页有关联的连接，断开连接
    if (tabToClose.connectionId && window.electron) {
      window.electron.ipcRenderer.send("ssh-disconnect", {
        connectionId: tabToClose.connectionId,
      });
    }

    // 清理终端实例
    const terminalObj = terminals.find(t => t.id === tabToClose.id);
    if (terminalObj) {
      terminalObj.term.dispose();
      setTerminals(prev => prev.filter(t => t.id !== tabToClose.id));
    }

    // 更新标签页列表
    setTabs((prevTabs) => prevTabs.filter((_, i) => i !== tabIndex));

    // 如果关闭的是当前活动标签页，切换到前一个标签页
    if (activeTab === tabIndex) {
      setActiveTab(Math.max(0, tabIndex - 1));
    } else if (activeTab > tabIndex) {
      // 如果关闭的标签页在当前活动标签页之前，需要调整活动标签页索引
      setActiveTab(activeTab - 1);
    }
  };

  return (
    <Box
      sx={{
        flexGrow: 1,
        display: "flex",
        flexDirection: "column",
        p: 2,
        height: "100%",
        overflow: "hidden",
      }}
    >
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          borderBottom: 1,
          borderColor: "divider",
          mb: 1,
        }}
      >
        <Tabs
          value={activeTab}
          onChange={handleTabChange}
          variant="scrollable"
          scrollButtons="auto"
          sx={{ flexGrow: 1 }}
        >
          {tabs.map((tab, index) => (
            <Tab
              key={tab.id}
              label={
                <Box sx={{ display: "flex", alignItems: "center" }}>
                  <span>{tab.title}</span>
                  {tabs.length > 1 && (
                    <IconButton
                      size="small"
                      onClick={(e) => closeTab(e, index)}
                      sx={{ ml: 1, p: 0.2 }}
                    >
                      <CloseIcon fontSize="small" />
                    </IconButton>
                  )}
                </Box>
              }
            />
          ))}
        </Tabs>
        <IconButton onClick={() => addNewTab()} size="small" sx={{ ml: 1 }}>
          <AddIcon />
        </IconButton>
      </Box>

      {tabs.map((tab, index) => (
        <Paper
          key={tab.id}
          elevation={3}
          sx={{
            flexGrow: 1,
            backgroundColor: "#1e1e1e",
            overflow: "hidden",
            display: activeTab === index ? "flex" : "none",
            p: 1,
            // 添加以下样式确保容器可见
            minHeight: "200px",
            position: "relative"
          }}
        >
          <Box
            data-tab-id={tab.id}
            sx={{
              width: "100%",
              height: "100%",
              position: "absolute",
              left: 0,
              top: 0,
              "& .xterm": {
                height: "100%",
                "& .xterm-viewport": {
                  overflow: "auto !important",
                },
              },
            }}
          />
        </Paper>
      ))}
    </Box>
  );
}

export default TerminalPanel;
